import {Header} from "antd/es/layout/layout";
import {Button, Avatar, Dropdown, MenuProps} from 'antd';
import {MenuFoldOutlined , MenuUnfoldOutlined} from '@ant-design/icons'
import './index.css'
import {useDispatch, useSelector} from "react-redux";
import {collapseMenu} from '../../store/reducer/tab.tsx'
import userImg from '../../assets/user.jpg'

const ComponentHeader = () => {
    //获取初始状态
    const collapsed = useSelector(state => state.tab.isCollapse)
    const handleLogout = () => {
    }
    const menuList: MenuProps['items'] = [
        {
            label: (
                <a target="_blank" rel="noopener noreferrer"> 个人信息</a>
            ),
            key: '1',
        },
        {
            label: (

                <a onClick={() => handleLogout} rel="noopener noreferrer" target="_blank"> 退出登录</a>
            ),
            key: '2',
        },
    ];
    const dispatch = useDispatch();
    const setCollapsed = () => {
        console.log('collapsed', collapsed)
        dispatch(collapseMenu());
    }
    return (
        <Header>
            <div className='header-container'>
                <div>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuFoldOutlined/> : <MenuUnfoldOutlined/>}
                        onClick={() => setCollapsed()}
                        style={{
                            fontSize: '16px',
                            width: 44,
                            height: 30,
                            color: 'white',
                            backgroundColor: '#cac3c3',
                            marginLeft: 150
                        }}
                    />
                </div>
                <div>
                    <Dropdown menu={{items: menuList}}>
                        <Avatar src={<img src={userImg} alt="avatar"/>}></Avatar>
                    </Dropdown>
                </div>
            </div>
        </Header>

    )

}
export default ComponentHeader